<script setup lang="ts">
import UCarousel from '#ui/components/elements/Carousel.vue';

const items = [
  "/img/carousel/1-vue-mini-full.png",
  "/img/carousel/2-python-mini-full.png",
  "/img/carousel/3-typescript-mini-full.png",
  "/img/carousel/4-java-mini-full.png",
];
const linkMapping = [
  "/series-vue",
  "/series-python",
  "/series-typescript",
  "/series-java",
];
// eslint-disable-next-line ts/consistent-type-definitions
type UCarouselExpose = {
  select: (index: number) => void;
  next: () => void;
  prev: () => void;
  page: number;
};
const carouselRef = ref<InstanceType<typeof UCarousel> & UCarouselExpose>();
const interval = ref<number>();
onMounted(() => {
  interval.value = window.setInterval(() => {
    if (!carouselRef.value)
      return;

    if (carouselRef.value.page === carouselRef.value.pages)
      return carouselRef.value.select(0);

    carouselRef.value.next();
  }, 3000);
});
onBeforeUnmount(() => {
  window.clearInterval(interval.value);
});
</script>

<template>
  <ClientOnly>
    <UCarousel
      ref="carouselRef" :items="items" :ui="{
        item: tw`basis-full`.join(' '),
        container: 'rounded-lg',
        arrows: {
          wrapper: tw`flex justify-around mt-4 relative -top-16`.join(' '),
        },
      }" class="rounded-lg overflow-hidden" arrows
    >
      <template #default="{ item, index }: {item: string, index:number}">
        <RouterLink :to="linkMapping[index]">
          <img :src="item" :draggable="true">
        </RouterLink>
      </template>

      <template #prev="{ onClick }">
        <UButton
          class="bg-gray-200 opacity-60 dark:bg-slate-00 text-black hover:opacity-100 hover:bg-white text-base disabled:bg-gray-500 rounded-full h-9 top-4"
          @click="() => {
            if (carouselRef && carouselRef.page === 1) {
              carouselRef.select(carouselRef.pages);
            }
            else {
              onClick();
            }
          }
          "
        >
          <UIcon name="i-heroicons-chevron-left-20-solid" class="text-black dark:text-white" dynamic />
        </UButton>
      </template>

      <template #next="{ onClick }">
        <UButton
          class="bg-gray-200 opacity-60 dark:bg-slate-00 text-black hover:opacity-100 hover:bg-white text-base disabled:bg-gray-500 rounded-full h-9 top-4"
          @click="() => {
            if (carouselRef && carouselRef.page === carouselRef.pages) {
              carouselRef.select(0);
            }
            else {
              onClick();
            }
          }
          "
        >
          <UIcon name="i-heroicons-chevron-right-20-solid" class="text-black dark:text-white" dynamic />
        </UButton>
      </template>
    </UCarousel>

    <template #fallback>
      <FallBack />
    </template>
  </ClientOnly>
</template>
